<template>
    <div>
        <el-select v-model="province" filterable placeholder="请选择省"  :style="{'width': inputWidth + 'px'}"  @change="changeProvinceValue" clearable>
            <el-option v-for="item in provincesList" :key="item.id" :label="item.cityName"
                :value="item.id"></el-option>
        </el-select>

        <el-select v-model="city" filterable placeholder="请选择市" :style="{'width': inputWidth + 'px', 'marginLeft': '10px'}"  @change="changeCityValue" clearable>
            <el-option v-for="item in CityList" :key="item.id" :label="item.cityName"
                :value="item.id"></el-option>
        </el-select>

        <el-select v-if="isShowDistrict" v-model="district" filterable placeholder="请选择区" :style="{'width': inputWidth + 'px', 'marginLeft': '10px'}"  clearable @change="changeDistrictValue">
            <el-option v-for="item in Regionslist " :key="item.id" :label="item.cityName"
                :value="item.id"></el-option>
        </el-select>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default{
    name: "ProviceSelect",
    data() {
        return {
            CityList: [],
            Regionslist: [],
            province: '',
            city: '',
            district: ''
        }
    },
    props: {
        isShowDistrict: {
            type: Boolean,
            default: false
        },
        defaultCity: {
            type: Object,
            default: () => {
                return {
                    province: '',
                    city: '',
                    district: ''
                }
            }
        },
        inputWidth: {
            type: String | Number,
            default: '165'
        }
    },
    computed: {
        ...mapGetters(['allCityList', 'provincesList', 'cityslist', 'regionslist'])
    },
    watch: {
        defaultCity: {
            handler(val) {
                console.log(val)
                this.province = val.province - 0;
                this.city = val.city - 0;
                this.district = val.district - 0;
                if(val.province && val.province != '') {
                    this.province = val.province - 0;
                } else {
                    this.province = '';
                }
                if(val.city && val.city != '') {
                    this.city = val.city - 0;
                } else {
                    this.city = '';
                }
                if(val.district && val.district != '') {
                    this.district = val.district - 0;
                } else {
                    this.district = '';
                }
                this.getlist();
            },
            deep: true,
        }
    },
    created() {
        if(this.defaultCity.province && this.defaultCity.province != '') {
            this.province = this.defaultCity.province - 0;
        } else {
            this.province = '';
        }
        if(this.defaultCity.city && this.defaultCity.city != '') {
            this.city = this.defaultCity.city - 0;
        } else {
            this.city = '';
        }
        if(this.defaultCity.district && this.defaultCity.district != '') {
            this.district = this.defaultCity.district - 0;
        } else {
            this.district = '';
        }
        this.getlist();
        
    },
    methods: {
        getlist() {
            this.CityList = this.cityslist;
            this.Regionslist = this.regionslist;
            if(this.province && this.province != '') {
                this.CityList = this.cityslist.filter(item => parseInt(item.parentId) == parseInt(this.province));
            }
            if(this.city && this.city != '') {
                this.Regionslist = this.regionslist.filter(item => parseInt(item.parentId) == parseInt(this.city));
            }
        },
        changeProvinceValue(value) {
            if(value == "") {
              this.CityList = this.cityslist;
              this.Regionslist = this.regionslist;
            } else {
                this.CityList = this.cityslist.filter(item => parseInt(item.parentId) == parseInt(value));
            }
            this.city = "";
            this.district = "";
            let arr = [];
            if(this.isShowDistrict) {
                arr = [value, this.city, this.district]
            } else {
                arr = [value, this.city]
            }
            this.$emit("changeValue", arr)
        },
        changeCityValue(value) {
            if(value == "") {
                this.Regionslist = this.regionslist;
                console.log(this.province)
            } else {
                let item = this.cityslist.find(ele => ele.id == value);
                let parentItem = this.provincesList.find(ele => ele.id == item.parentId);
                this.province = parentItem.id;
                this.CityList = this.cityslist.filter(item => parseInt(item.parentId) == parseInt(parentItem.id));
                this.Regionslist = this.regionslist.filter(item => parseInt(item.parentId) == parseInt(value));
            }
            this.district = "";
            let arr = [];
            if(this.isShowDistrict) {
                arr = [this.province, value, this.district]
            } else {
                arr = [this.province, value]
            }
            this.$emit("changeValue", arr)
        },
        changeDistrictValue(value) {
            if(value == "") {
            }else {
                let item = this.regionslist.find(ele => ele.id == value);
                let cityItem = this.cityslist.find(ele => ele.id == item.parentId);
                this.city = cityItem.id;
                let parentItem = this.provincesList.find(ele => ele.id == cityItem.parentId);
                this.province = parentItem.id;
                this.CityList = this.cityslist.filter(item => parseInt(item.parentId) == parseInt(parentItem.id));
                this.Regionslist = this.regionslist.filter(item => parseInt(item.parentId) == parseInt(cityItem.id));
            }
            let arr = [];
            if(this.isShowDistrict) {
                arr = [this.province, this.city, value]
            } else {
                arr = [this.province, this.city]
            }
            this.$emit("changeValue", arr)
        }
    }
}
</script>
